<template>
  <div>
    <div>
      <Breadcrumb />
    </div>
    <div class="center">
      <div class="left"><h1>轮播图管理</h1></div>
      <div class="right">
        <input
          type="text "
          @change="search"
          v-model="inputTxt"
          placeholder="输入编号搜索"
        />
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="编号" width="250">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row._id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品id" width="250">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.goods_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" width="250">
        <template slot-scope="scope">
          <el-image
            style="width: 150px; height: 80px"
            :src="scope.row.image_src"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="是不是上架" width="180">
        <template slot-scope="scope">
          <!-- <span style="margin-left: 10px" @click="show(scope.row)">{{
            scope.row.show == 1 ? "是" : "不是"
          }}</span> -->
          <button style="margin-left: 10px" @click="show(scope.row._id)">
            {{ scope.row.show == 1 ? "是" : "不是" }}
          </button>
        </template>
      </el-table-column>
      <!-- <el-table-column label="打开方式" width="250">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.open_type }}</span>
      </template>
    </el-table-column> -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-dialog title="修改轮播图" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="商品id" :label-width="formLabelWidth">
                <el-input v-model="form.goods_id" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="修改图片" :label-width="formLabelWidth">
                <el-upload
                  action="http://web.woniulab.com:8005/admin/fileUpload"
                  :on-success="handleAvatarSuccess"
                  name="imgSrc"
                  list-type="picture-card"
                  :headers="headers"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="changeCarouse">确 定</el-button>
              <el-button type="primary" @click="dialogFormVisible = false"
                >取 消</el-button
              >
            </div>
          </el-dialog>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 

<script>
import Breadcrumb from "../../commponents/common/Breadcrumb.vue";
export default {
  components: { Breadcrumb },
  data() {
    return {
      tableData: [],
      inputTxt: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      dialogFormVisible: false,
      formLabelWidth: "200px",
    };
  },
  methods: {
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.form = { ...row };
    },
    async handleDelete(index, row) {
      const { abc } = await this.$api.carousel.deleteCarousel({
        _id: row._id,
      });
      console.log(abc);
      const { data } = await this.$api.carousel.getCarousel();
      this.tableData = data.message;
    },
    //进行搜索
    async search(e) {
      console.log("aaa");
      const { data } = await this.$api.carousel.findByIdSwiper({
        _id: this.inputTxt,
      });

      this.tableData = [data.data];
    },
    //修改轮播图
    async changeCarouse() {
      this.dialogFormVisible = false;
      this.$api.carousel.updateSwiper({
        _id: this.form._id,
        goods_id: this.form.goods_id,
        image_src: this.form.image_src,
      });
      const { data } = await this.$api.carousel.getCarousel();
      this.tableData = data.message;
    },
    //修改图片路径
    handleAvatarSuccess(res, file) {
      this.form.image_src = "http://web.woniulab.com:8005/images/" + res.data;
      //   this.formLabelAlign.image='http://47.98.128.191:3000/'+res.data[0];
    },
    //是否上架
    async show(id) {
      const aa = await this.$api.carousel.updateSwiperShow({ _id: id });
      const { data } = await this.$api.carousel.getCarousel();
      this.tableData = data.message;
    },
  },
  async created() {
    const { data } = await this.$api.carousel.getCarousel();
    this.tableData = data.message;
  },
  computed: {
    headers() {
      return {
        Authorization: localStorage.token,
      };
    },
  },
};
</script>

<style>
.center {
  display: flex;
  justify-content: space-between;
}
.center .right {
  text-align: center;
  margin-top: 20px;
}
</style>